<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
      <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
      <script src="js/vue.js"></script>
      <script src="element-ui/lib/index.js"></script>
	  <script src="https://unpkg.com/axios@0.20.0/dist/axios.min.js"></script>


	</head>

	<body>
		
		<div class="login_container" id = "app">

		    <div class="login_box" >
				<div style="width:100%;text-align:center;margin-top: 70px;">
					<h3>登录界面</h3>
				</div>
		    <!-- 登陆表单区域 -->
		    <el-form ref="loginFormRef" :model="loginFrom" :rules="LoginfromRules"  label-width="15%" class="login_form">
				<!-- 用戶名 -->
				<el-form-item label="手机" prop="username">
					<el-input  v-model="loginFrom.username">
					</el-input>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="loginFrom.password">
					</el-input>
				</el-form-item>
				  <!-- 按钮 -->
				<el-form-item >
					 <el-button  class="btns" type="primary" @click="loginSubmit" round>登录</el-button>
				</el-form-item>
		    </el-form>
		    </div>
		</div>
		<script>
			const URL_IP = "http://localhost:8888"
			const URL_API_HEAD = URL_IP+"/userapi"
		new Vue({
			el:"#app",
			data:{
		            loginFrom:{
		                username:'',
		                password:''
		            },
					LoginfromRules:{
		                // 验证用户名是否合法
						username: [
						  { required: true, message: '请输入登录名称', trigger: 'blur' },
						],
						// 验证密码是否合法
						password: [
						  { required: true, message: '请输入登录密码', trigger: 'blur' },
						]
					}
		    },
			methods:{
				resetLoginForm(){
				    this.$refs.loginFormRef.resetFields();
				},
				loginSubmit(){
					let _this = this;
					let api = URL_API_HEAD+"/login";
					// let apiTest = URL_IP+"/demo/testGet"
					console.log(this.loginFrom.password)
					console.log(this.loginFrom.username)
					var url = "/deliver/main.html?phone="+_this.loginFrom.username
					axios.post(api,{
						phone:_this.loginFrom.username,
						password:_this.loginFrom.password
					}).then(res=>{
						console.log(res)
						if(res.data.status_code == 0){
							//弹窗 登录失败。
							console.log("登录失败")
						}else if(res.data.data.user_type == 1){
							//是管理员
							//改成管理员。
							console.log("跳转到管理员页面")
							// url = "/deliver/main.html?121212"
							window.location.href=url
						}else{
							console.log("跳转到普通用户页面")
							//是普通用户
							//window.location.href=url
						}
					});
				},
			}
		});
		</script>
		
		<style lang="less">
		.login_container{
			/* background-position: center; */
			/*background-color: #00FFFF;*/
			/* height:100%; */
			/* width :100%; */
			/* text-align:center; */
		}
		.el-input {
			width: 70%;
			border-radius: 30px;
		}
		.el-button{
			width: 200%;
		}
		.login_box{
		    width: 400px;
		    height: 50%;
			background-color: #99CCFF;
		    border-radius:20px;
			text-align:center;
		    position: absolute;
		    left: 50%;
		    top: 50%;
		    transform: translate(-50%,-50%);
		}
		
		.login_form{
		    position: absolute;
		    bottom: 0;
		    width: 100%;
		    padding: 0 0 0 0 px;
			margin-left: 30px;
		    box-sizing: border-box;
		}
		
		.btns{
		    display: flex;
			width: 20%;
			position: center;
			margin-left: 100px;
			margin-bottom: 20px;
		    /* justify-content: center; */
		}
		</style>
	</body>

</html>
